<script setup lang='ts'>

import NavBar from '../../components/NavBar.vue'
import { reactive } from 'vue'
const chartData = reactive({
  series: [
    {
      data: [
        {
          labelText: '农夫山泉(39.4%)',
          value: 8858,
        },
        {
          labelText: '怡宝(60.6%)',
          value: 20000,
        }
      ]
    }
  ]
})
const opts = {
  legend: {
    show: false
  },
  dataLabel: true,
  enableScroll: false,
  title: {
    name: "共计(元)",
    fontSize: 12,
    color: "#999999"
  },
  subtitle: {
    name: "28866.00",
    fontSize: 18,
    color: "#1A1A1A"
  },
  extra: {
    ring: {
      ringWidth: 35,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderColor: "#FFFFFF"
    }
  }
}
</script>

<template>
  <NavBar title="经营统计" :transparent="true"/>
  <view class="bg">
    <view class="filter nav-padding">
      <view class="range">
        <span class="active">今天</span>
        <span>昨天</span>
        <span>本月</span>
        <span>上月</span>
        <span>今年</span>
        <span>自定义</span>
      </view>
      <view class="select">
        <span>全部场地 （5个）</span>
        <span>全部设备类型 （5个）</span>
      </view>
    </view>
    <view class="card">
      <view class="header">
        <h3>今日收入情况</h3>
        <span>2024-06-12</span>
      </view>
      <view class="body">
        <qiun-data-charts type="ring" :chartData="chartData" :opts="opts"/>
      </view>
    </view>
    <view class="card">
      <view class="header"> <h3>今日订单数（共45单)</h3></view>
      <view class="body">
        <view class="order-item">
          <p>线上投币</p>
          <p class="num">33</p>
        </view>
        <view class="order-item">
          <p>线下投币</p>
          <p class="num">12</p>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang='scss'>
.bg {
  height: calc(546rpx + var(--status-bar-height));
  position: relative;
  background-image: url("/static/image/home/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.filter {
  color: #fff;
  .range {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-evenly;
    span {
      position: relative;
      font-size: 30rpx;
      padding: 0 20rpx;
      &.active {
        &:after {
          display: flex;
        }
      }
      &:after {
        position: absolute;
        content: '';
        bottom: -15rpx;
        left: 30%;
        width: 40%;
        height: 6rpx;
        background: #FFFFFF;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        display: none;
      }
    }
  }
  .select {
    margin-top: 50rpx;
    display: flex;
    justify-content: space-evenly;
    span {
      position: relative;
      font-size: 30rpx;
      &:after {
        content: '';
        position: absolute;
        border-top: 15rpx solid white;
        border-left: 10rpx solid transparent;
        border-right: 10rpx solid transparent;
        top: 20rpx;
      }
    }
  }
}
.card {
  background: #fff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin: 46rpx 28rpx;
  padding: 28rpx;
  .header {
    display: flex;
    justify-content: space-between;
    color: #303030;
    align-items: center;
    h3 {
      font-size: 28rpx;
    }
    span {
      color: #999999;
      font-size: 24rpx;
    }
  }
  .body {
    display: flex;
    justify-content: space-between;
  }
}
.order-item {
  margin-top: 26rpx;
  width: 48%;
  height: 160rpx;
  background-image: url("/static/image/home/order_card_y.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #fff;
  box-sizing: border-box;
  .num {
    font-size: 40rpx;
    margin-top: 10rpx;
  }
  &:nth-child(2n) {
    background-image: url("/static/image/home/order_card_r.png");
  }
}
</style>